import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './Popup.scss';
import WechatBind from '../WechatBind/WechatBind';

const classNames = require('classnames');

class Popup extends Component {
  state = {
    popupVisible: false,
    bindingStatus: 0,
    countdown: 5,
  }
  componentWillReceiveProps (nextProps) {
    this.setState({
      popupVisible: nextProps.visible,
      bindingStatus: nextProps.bindingStatus,
      countdown: nextProps.countdown,
    });
  }

  render () {
    const popupClassName = classNames('popup', { hide: !this.state.popupVisible });
    const { bindingStatus, countdown } = this.state;
    return (
      <div className={popupClassName}>
        <div className="popup-content">
          <WechatBind
            bindingStatus={bindingStatus}
            countdown={countdown}
          />
        </div>
      </div>
    );
  }
}

Popup.propTypes = {
  visible: PropTypes.bool.isRequired,
  bindingStatus: PropTypes.number, // eslint-disable-line
  countdown: PropTypes.number, // eslint-disable-line
};

export default Popup;
